<template>
  <div>
    <page-list :x-uri="uri" :custom-components="custom" :doactions="doactions" :checkbox-item="false">
      <!-- 自定义tab -->
      <template v-slot:page-tabs>
        <tabs />
      </template>
      <!-- 页面操作按钮 -->
      <template v-slot:page-button>
        <!-- <el-button size="mini" type="primary" plain>批量导入</el-button> -->
        <el-button v-auth="'user.admin.create'" size="mini" type="primary" @click="create">新建用户</el-button>
      </template>
      <!-- 表格底部批量操作选项 -->
      <!-- <template v-slot:table-button="scope">
        <el-button size="mini" @click="deleteFun(scope)" v-auth="'user.account.delete'">删除</el-button>
        <el-button size="mini" v-auth="'user.account.delete'">彻底删除</el-button>
        <el-button size="mini" v-auth="'user.account.edit'">禁用</el-button>
      </template> -->
    </page-list>
    <el-dialog title="请选择角色" :visible.sync="dialogVisible" width="800px" :close-on-click-modal="false" top="30vh">
      <el-form v-if="dialogVisible" ref="group" :model="group">
        <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange">全选</el-checkbox>
        <div style="margin: 15px 0;" />
        <el-checkbox-group v-model="checkedGroup" @change="handleCheckedGroupChange">
          <el-checkbox v-for="_group in groups" :key="_group.id" :label="_group.id">{{ _group.title }}</el-checkbox>
        </el-checkbox-group>
        <el-form-item size="small">
          <el-row type="flex" justify="end"><el-button type="primary" :disabled="disableSubmit" @click="onSubmit">保存</el-button></el-row>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import PageList from '@public/template/page_list.vue';
import Status from './components/status';
import Tabs from '../tabs';
export default {
  components: {
    PageList,
    Tabs
  },
  inject: ['reload'],
  data() {
    return {
      uri: '/admin/user/account/list',
      doactions: [
        {
          title: '角色',
          meta: { permission: 'user.admin.role.list' },
          callback: this.group,
          display: ({ row }) => {
            return !(row.group_ids && row.group_ids.find(value => value == 2));
          }
        },
        { title: '编辑', meta: { permission: 'user.admin.edit' }, callback: this.edit },
        { title: '删除', meta: { permission: 'user.admin.delete' }, callback: this.deleteUser }
      ],
      dialogVisible: false,
      disableSubmit: false,
      custom: {
        status: Status
      },
      groups: [],
      checkedGroup: [],
      checkAll: false,
      isIndeterminate: false
    };
  },
  created() {
    this.$http.get(
      '/admin/user/group/groups',
      {},
      response => {
        this.groups = response.data;
      },
      error => {
        this.$message.error(error.msg);
      }
    );
  },
  methods: {
    create: function() {
      this.$router.push({ path: '/user/account/create' });
    },
    group: function({ row }) {
      this.group = {
        user_id: row.id
      };
      this.$nextTick(() => {
        this.$http.get(
          '/admin/user/account/groups/' + row.id,
          {},
          response => {
            this.checkedGroup = response.data;
            this.checkAll = this.checkedGroup.length === this.groups.length;
            this.isIndeterminate = this.checkedGroup.length > 0 && !this.checkAll;
            this.dialogVisible = !this.dialogVisible;
            this.resetText = '撤销修改';
          },
          error => {
            this.$message.error(error.msg);
          }
        );
      });
    },
    edit: function({ row }) {
      this.$router.push({ path: '/user/account/' + row.id + '/edit' });
    },
    deleteUser: function({ row }) {
      this.$box
        .confirm('确认删除吗')
        .then(() => {
          this.$http.delete(
            '/admin/user/account/' + row.id,
            {},
            response => {
              this.$message.success(response.msg, _ => {
                this.reload();
              });
            },
            error => {
              this.$message.error(error.msg);
            }
          );
        })
        .catch(() => {});
    },
    deleteFun: function({ rows }) {
      console.log(rows);
    },
    handleCheckAllChange(checked) {
      this.checkedGroup = checked ? this.groups.map(item => item.id) : [];
      this.isIndeterminate = false;
    },
    handleCheckedGroupChange(value) {
      const checkedCount = value.length;
      this.checkAll = checkedCount === this.groups.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.groups.length;
    },
    onSubmit: function() {
      this.$refs['group'].validate(valid => {
        if (valid) {
          this.disableSubmit = true;
          this.$http.put(
            '/admin/user/account/groups/' + this.group.user_id,
            { groups: this.checkedGroup },
            response => {
              this.$message.success(response.msg);
              this.disableSubmit = false;
              this.dialogVisible = !this.dialogVisible;
            },
            error => {
              this.$message.error(error.msg);
            }
          );
        }
      });
    }
  }
};
</script>
